import React from "react";
import { Tag, Input, Tooltip, message } from "antd";
import { WeaTag } from "ecCom";
import { i18n } from "../../../public/i18n";
import * as Util from "../../../util/Util";
import { toJS } from "mobx";


export default class EditableTagGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputVisible: false,
      inputValue: "",
      editInputIndex: -1,
      editInputValue: "",
      colors:[ // bgColor ~ color ~ borderColor
        ['#FFEBEB','#F56C6C','#EFB5B5'],
        ['#FFE4C6','#EA842B','#EEA666'],
        ['#FFF6D3','#CB913B','#E4BB80'],
        ['#F2C7BA','#853B12','#D47F64'],
        ['#E3CEAD','#845A43','#B49A68'],
        ['#A97C7C','#FFFFFF','#6F3636'],
        ['#FEFFBD','#B09F00','#CDCF4C'],
        ['#E4F6F5','#29A39D','#A3E5E2'],
        ['#D9EDBA','#43670B','#7FAF34'],
        ['#ADCFB6','#16662B','#53815F'],
        ['#4D9D64','#FFFFFF','#117B2F'],
        ['#E4F0FE','#409EFF','#B3D3F9'],
        ['#E0E7FF','#2146D2','#8BA4FF'],
        ['#6BAACE','#FFFFFF','#1785C6'],
        ['#EECBFF','#8C30B9','#CE6AFF'],
        ['#FFCDF5','#B930AB','#BB2CBE'],
        ['#D277C0','#FFFFFF','#A10AA5'],
      ]
    };
    this.input = React.createRef();
    this.editInput = React.createRef();
  }

  handleClose = (removedTag) => {
    const { onTagDeleteCallBack } = this.props;
    onTagDeleteCallBack &&
      typeof onTagDeleteCallBack === "function" &&
      onTagDeleteCallBack(removedTag.id);
  };

  showInput = () => {
    this.setState({ inputVisible: true },()=>{
      const { input } = this.input.refs;
      input && input.focus();
    });
  };

  handleInputChange = (e) => {
    this.setState({ inputValue: e.target.value });
  };

  handleInputConfirm = () => {
    const { inputValue } = this.state; 
    const { onTagInputSaveCallBack } = this.props;
    this.setState(
      {
        inputVisible: false,
        inputValue: "",
      },
      () => {
        // let defaultColor = "#" + Math.random().toString(16).slice(2, 8);
        let defaultColor = this.getRandomBgColor();
        if (inputValue && inputValue.trim().length > 0) {
          onTagInputSaveCallBack &&
            typeof onTagInputSaveCallBack === "function" &&
            onTagInputSaveCallBack({
              name: inputValue,
              color: defaultColor,
            });
        } else {
          message.warn(i18n.message.noEmptyTagName());
        }
      }
    );
  };

  saveInputRef = (input) => {
    this.input = input;
  };

  render() {
    const {
      inputVisible,
      inputValue,
    } = this.state;
    const { data } = this.props;
    return (
      <div className="wea-wr-editable-tag-group-container">
        {toJS(data).map((tag, index) => {
          const colorArry = this.getColorByBgColor(tag.color);
          const isLongTag = tag.name.length > 20;
          const tagElem = (
              <WeaTag ecId={`${this && this.props && this.props.ecId || ''}_WeaTag@eyf9yr@${tag.id}`}
              className="edit-tag"
              key={tag.id}
              closable={true}
              onClose={() => this.handleClose(tag)}
              style={{border: `1px solid ${colorArry[2]}`,background:colorArry[0],color:colorArry[1]}}
            >
              {isLongTag ? `${tag.name.slice(0, 20)}...` : tag.name}
            </WeaTag>
          );
          return isLongTag ? (
            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@2h2ya2@${tag.id}`} title={tag.name} key={tag.id}>
              {tagElem}
            </Tooltip>
          ) : (
            tagElem
          );
        })}
        {inputVisible && (
          <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@0ua7qp`}
            ref={this.saveInputRef}
            type="text"
            size="small"
            className="tag-input"
            value={inputValue}
            onChange={this.handleInputChange}
            onBlur={this.handleInputConfirm}
            onPressEnter={this.handleInputConfirm}
          />
        )}
        {!inputVisible && (
          <Tag ecId={`${this && this.props && this.props.ecId || ''}_Tag@6074ka`}
            className="site-tag-plus"
            onClick={this.showInput}
            style={{border: "1px solid #E9E9EB",background:"#F4F4F5"}}
            >
              <span style={{color:"#909399"}}><i className="icon-coms02-Add-to" /> {i18n.button.addIndividualTag()}</span>
          </Tag>
        )}
      </div>
    );
  }

 

  getRandomBgColor = () => {
    const { colors } = this.state;
    return colors[Util.getRandom(0,colors.length,0)][0];
  }

 
  // return ['bgColor','color']
  getColorByBgColor = (bgColor) =>{
    if (Util.isEmpty(bgColor)) {
      return this.getRandomColors();
    }
    const { colors } = this.state;
    let color = colors.filter((item,index)=>{
      if (item[0].toLowerCase() == bgColor.toLowerCase()) {
        return true;
      }
    })
    return color && color.length > 0 ? color[0]: [bgColor,'#FFFFFF','#FFFFFF'];
  }

  getRandomColors = ()=>{
    const { colors } = this.state;
    return colors[Util.getRandom(0,colors.length,0)];
  }
  

}
